<template>
  <div class="detail">
    <tab-control
      :titles="names"
      class="tabs"
      v-if="ShowControl"
      @tabItemClick="tabClick"
      ref="tabControlRef"
    />
    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <detail-swipe :swipe-data="mainPart.topModule.housePicture.housePics" />
      <detail-infos name="描述" :ref="getSectionRef" :detail-infos="mainPart.topModule" />
      <detail-facility name="设施" :ref="getSectionRef" :house-facility="mainPart.dynamicModule.facilityModule.houseFacility" />
      <detail-landload name="房东" :ref="getSectionRef" :landlord-module="mainPart.dynamicModule.landlordModule" />
      <detail-comment name="评论" :ref="getSectionRef" :comment="mainPart.dynamicModule.commentModule" />
      <detail-notice name="须知" :ref="getSectionRef" :order-rules="mainPart.dynamicModule.rulesModule" />
      <detail-map name="周边" :ref="getSectionRef" :position-module="mainPart.dynamicModule.positionModule" />
      <detail-intro :price-intro="mainPart.introductionModule" />
    </div>

    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="">
      <div class="text">JY旅途,永无止境！</div>
    </div>

    <detail-action-bar :current-house="detailData.currentHouse" />
  </div>
</template>

<script setup>
  import { computed, ref, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'

  import tabControl from '@/components/tab-control/tab-control.vue'
  import DetailSwipe from './cpns/detail-01-swipe.vue'
  import DetailInfos from './cpns/detail-02-infos.vue'
  import DetailFacility from './cpns/detail-03-facility.vue'
  import DetailLandload from './cpns/detail-04-landlord.vue'
  import DetailComment from './cpns/detail-05-comment.vue'
  import DetailNotice from './cpns/detail-06-notice.vue'
  import DetailMap from './cpns/detail-07-map.vue'
  import DetailIntro from './cpns/detail-08-intro.vue'
  import DetailActionBar from './cpns/detail-09-actionbar.vue'

  import useDetailStore from '@/stores/modules/detail'
  import useScroll from '@/hooks/useScroll'

  const detailStore = useDetailStore()

  const route = useRoute()
  const router = useRouter()
  const houseId = route.params.houseId

  detailStore.fetchDetailData(houseId)
  const { detailData } = storeToRefs(detailStore)
  const mainPart = computed(() => detailData.value.mainPart)

  const onClickLeft = () => {
    router.back()
  }

  // tabControl

  // 1.监听滚动显示
  const { scrollTop } = useScroll()
  const ShowControl = computed(() => {
    return scrollTop.value >= 300
  })
  // 2.点击跳转至对应位置
  const sectionEls = ref({})
  const names = computed(() => {
    return Object.keys(sectionEls.value)
  })

  const getSectionRef = (value) => {
    if (!value) return
    const name = value.$el.getAttribute("name")
    sectionEls.value[name] = value.$el
  }

  let isClick = false
  let currentDistance = -1
  const tabClick = (index) => {
    const key = Object.keys(sectionEls.value)[index]
    const el = sectionEls.value[key]
    let distance = el.offsetTop
    if (index !== 0) {
      distance = distance - 44
    }

    isClick = true
    currentDistance = distance

    scrollTo({
      top: distance,
      behavior: "smooth"
    })
  }

  // 页面滚动，滚动时匹配tabControl索引
const tabControlRef = ref()
watch(scrollTop, (newValue) => {
  if (newValue === currentDistance) {
    isClick = false
  }
  if (isClick) return
  // 1.获取所有区域的offsetTop
  const els = Object.values(sectionEls.value)
  const values = els.map(el => el.offsetTop)
  let index = values.length - 1
  // 2.根据newValue去匹配想要的索引
  for (let i = 0;i < values.length;i++) {
    const value = values[i]
    if (value > newValue + 44) {
      index = i - 1
      break
    }
  }
  tabControlRef.value?.setCurrentIndex(index)
})

</script>

<style lang="less" scoped>
  .detail {
    margin-bottom: 50px;
  }

  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #fff;
  }

  .footer {
    height: 18vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 32.8vw; 
    }

    .text {
      color: #7688a7;
      font-size: 12px;
      margin-top: 10px;
    }
  }
</style>